<!doctype HTML>
<!-- Tests a situation where the DOM descendant (but not stacking descendant)
of a composited layer squashes into a sibling. -->
<div style="width: 100px; height: 100px; background: lightblue; will-change: transform"></div>
<div style="width: 100px; height: 100px; backface-visibility: hidden;">
  <div id=target style="width: 100px; height: 100px;
      background: green; position: relative; margin-top: -50px"></div>
</div>
<script>
  if (window.testRunner)
    window.testRunner.waitUntilDone();
  onload = () => {
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        target.style.boxShadow = '5px 5px black';
        if (window.testRunner)
            window.testRunner.notifyDone();
      });
    });
  }
</script>
